<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/common :: common_head('添加试题')"></head>
<head>
  <link rel="stylesheet" th:href="@{/css/back/add-question.css}">
</head>
<body>
  <!-- 引入公共的导航部分 -->
  <header th:include="~{/common/common :: common_header_back('','添加试题')}"></header>

  <article>
    <!-- 侧边栏部分 -->
    <nav th:include="~{/common/common :: common_left_nav('','')}"></nav>
    <!-- 显示内容的部分 -->
    <div class="context-wrap">
      <blockquote class="layui-elem-quote" style="text-align: center;font-size: 18px;">请添加问题</blockquote>
      <hr class="layui-border-green">
      <form class="layui-form" action="" style="margin-bottom: 50px;">
        <input type="hidden" name="questionImage" id="questionImage" value="">
        <div class="layui-form-item">
          <label class="layui-form-label">所属科目</label>
          <div class="layui-input-block">
            <input type="radio" name="questionClassify" value="1" title="数学" checked>
            <input type="radio" name="questionClassify" value="4" title="化学">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">问题类型</label>
          <div class="layui-input-block">
            <input type="radio" name="questionType" value="1" title="单项选择" checked>
            <input type="radio" name="questionType" value="2" title="判断对错">
            <input type="radio" name="questionType" value="3" title="多项选择">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">考试题</label>
          <div class="layui-input-block">
            <input type="checkbox" name="questionTest" lay-skin="switch">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">问题描述</label>
          <div class="layui-input-block">
            <input type="text" name="questionTopic" required  lay-verify="required" placeholder="请输入问题的描述" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">选项A</label>
          <div class="layui-input-block">
            <input type="text" name="questionA" required placeholder="请输入选项A的内容" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">选项B</label>
          <div class="layui-input-block">
            <input type="text" name="questionB" required placeholder="请输入选项B的内容" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">选项C</label>
          <div class="layui-input-block">
            <input type="text" name="questionC" placeholder="请输入选项C的内容" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">选项D</label>
          <div class="layui-input-block">
            <input type="text" name="questionD" placeholder="请输入选项D的内容" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">选项E</label>
          <div class="layui-input-block">
            <input type="text" name="questionE" placeholder="请输入选项D的内容" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">选项F</label>
          <div class="layui-input-block">
            <input type="text" name="questionF" placeholder="请输入选项D的内容" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">选项G</label>
          <div class="layui-input-block">
            <input type="text" name="questionG" placeholder="请输入选项D的内容" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">上传图片</label>
          <div class="layui-upload-drag" id="uploadImg">
            <i class="layui-icon"></i>
            <p>点击上传图片，或将图片拖拽到此处</p>
            <div class="layui-hide" id="uploadDemoView">
              <hr>
              <img src="" alt="上传成功后渲染" style="max-width: 200px">
            </div>
          </div>
        </div>
        <!-- 科目四的答案设置 -->
        <div class="layui-form-item">
          <label class="layui-form-label">答案</label>
          <div class="layui-input-block">
            <input type="checkbox" name="answer.questionAnswerA" title="A" value="A">
            <input type="checkbox" name="answer.questionAnswerB" title="B" value="B">
            <input type="checkbox" name="answer.questionAnswerC" title="C" value="C">
            <input type="checkbox" name="answer.questionAnswerD" title="D" value="D">
            <input type="checkbox" name="answer.questionAnswerE" title="E" value="E">
            <input type="checkbox" name="answer.questionAnswerF" title="F" value="F">
            <input type="checkbox" name="answer.questionAnswerG" title="G" value="G">
          </div>
          <div class="layui-form-mid layui-word-aux">温馨提示：注意问题的答案选择哦</div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">问题解释</label>
          <div class="layui-input-block">
            <textarea type="text" name="questionExplain" required placeholder="请输入此问题的解释，供学习者参考使用" autocomplete="off" class="layui-input" style="padding: 10px;height: 100px;resize: none"></textarea>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="add-form">立即添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">清空内容</button>
          </div>
        </div>
      </form>
    </div>
  </article>
</body>
</html>
<script>
  layui.use(['form','upload','element'], function(){

    let form = layui.form;
    let $ = layui.$;
    let upload = layui.upload;
    //监听提交
    form.on('submit(add-form)', function(data){
      $.ajax({
        url: '/question/addQuestion',
        method: 'post',
        data: data.field,
        dataType: 'JSON',
        success: function (res){
          if (res == 1){
            //添加成功
            layer.msg('添加成功', {
              time: 10000, //10s后自动关闭
              btnAlign: 'c',
              btn: ['知道了']
            });
            $(".layui-form")[0].reset();
            layui.form.render();
          }
        },
        error: function (){
          layer.msg('对不起，题库已满', {
            time: 10000, //10s后自动关闭
            btnAlign: 'c',
            btn: ['知道了']
          });
        }
      },JSON)
      return false;
    });

    //拖拽上传
    upload.render({
      elem: '#uploadImg' //绑定元素
      ,url: '/question/uploadImage' //上传接口
      ,done: function(res){
        //上传完毕回调
        layer.msg('上传成功');
        $('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.msg);
        $("#questionImage").val(res.msg);
      }
    });

  });
</script>